<script setup lang="ts">
// 这里可写逻辑，也可以空着
import { ref } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'

const router = useRouter()

// 定义注册表单数据，添加角色字段
const registerForm = ref({
  username: '',
  password: '',
  confirmPassword: '',
  email: '',
  contact: '', // 添加联系方式字段
  organizerName: '', // 添加负责人字段
  role: 'user' // 默认选择用户角色
})

// 处理注册逻辑
const handleRegister = async () => {
  // 简单的表单验证
  if (registerForm.value.password !== registerForm.value.confirmPassword) {
    alert('密码和确认密码不匹配')
    return
  }

  try {
    // 设置后端接口地址
    let url = ''

    // 根据不同角色调用不同的注册接口
    switch(registerForm.value.role) {
      case 'organizer':
        url = 'http://localhost:8080/organizer/register' // 举办方注册接口
        break
      case 'user':
        url = 'http://localhost:8080/api/user/register' // 用户注册接口
        break
      default:
        url = 'http://localhost:8080/register'
    }

    // 使用JSON格式发送数据，确保后端能正确接收参数
    let dataToSend = {}

    // 根据角色添加字段
    if (registerForm.value.role === 'organizer') {
      // 如果是举办方，添加举办方相关字段
      dataToSend = {
        orAccount: registerForm.value.email,
        orPassword: registerForm.value.password,
        orName: registerForm.value.username,
        orPeopleName: registerForm.value.organizerName,
        orContact: registerForm.value.contact
      }
    } else {
      // 如果是普通用户，添加用户相关字段
      dataToSend = {
        email: registerForm.value.email,
        password: registerForm.value.password,
         username: registerForm.value.username,
        // 🎯 将 contact 映射到 User 实体中已有的字段
        phone: registerForm.value.contact, // 假设后端有 phone 字段
        // 或者使用其他已有字段
        // contactInfo: registerForm.value.contact
      }
    }

    // 发送注册请求，使用JSON格式
    const response = await axios.post(url, dataToSend, {
      headers: {
        'Content-Type': 'application/json'
      }
    })

    console.log('注册响应:', response.data)

    // 处理注册成功逻辑
    if (response.data.success) {
      // 保存 token 到 localStorage（如果后端返回）
      if (response.data.token) {
        localStorage.setItem('token', response.data.token)
      }

      // 显示成功消息并要求用户确认返回登录页面
      const confirmReturn = confirm(`恭喜, ${registerForm.value.username}! 注册成功\n\n点击"确定"返回登录页面`)
      if (confirmReturn) {
        // 跳转到登录页面
        router.push('/Login')
      }
    } else {
      alert(response.data.msg || '注册失败')
    }
  } catch (error: unknown) {
    // 使用类型守卫处理错误
    if (axios.isAxiosError(error)) {
      // Axios错误处理
      const message = (error.response?.data as { message?: string })?.message || '注册过程中发生错误'
      alert(message)
    } else if (error instanceof Error) {
      // 原生错误处理
      alert(error.message)
    } else {
      // 其他未知错误
      alert('注册过程中发生未知错误')
    }
    console.error('注册错误:', error)
  }
}
</script>

<template>
  <div class="register-container">
    <div class="register-box">
      <h1 class="register-title">用户注册</h1>
      <form @submit.prevent="handleRegister" class="register-form">
        <!-- 添加身份选择单选框，放在表单最前面 -->
        <div class="form-row">
          <label class="form-label">身份:</label>
          <div class="radio-group">
            <label class="radio-button">
              <input
                type="radio"
                v-model="registerForm.role"
                value="organizer"
              />
              <span class="radio-text">举办方</span>
            </label>

            <label class="radio-button">
              <input
                type="radio"
                v-model="registerForm.role"
                value="user"
              />
              <span class="radio-text">用户</span>
            </label>
          </div>
        </div>

        <!-- 用户名输入框 -->
        <div class="form-row">
          <label for="reg-username" class="form-label">用户名:</label>
          <input
            id="reg-username"
            v-model="registerForm.username"
            type="text"
            placeholder="请输入账号名称"
            required
            class="form-input"
          />
        </div>

        <!-- 邮箱输入框 -->
        <div class="form-row">
          <label for="reg-email" class="form-label">邮箱:</label>
          <input
            id="reg-email"
            v-model="registerForm.email"
            type="email"
            placeholder="请输入邮箱"
            required
            class="form-input"
          />
        </div>

        <!-- 联系方式输入框，仅在选择举办方时显示 -->
        <div class="form-row">
          <label for="reg-contact" class="form-label">联系方式:</label>
          <input
            id="reg-contact"
            v-model="registerForm.contact"
            type="text"
            placeholder="请输入手机号"
            required
            class="form-input"
          />
        </div>

        <!-- 负责人输入框，仅在选择举办方时显示 -->
        <div class="form-row" v-if="registerForm.role === 'organizer'">
          <label for="reg-organizer-name" class="form-label">负责人:</label>
          <input
            id="reg-organizer-name"
            v-model="registerForm.organizerName"
            type="text"
            placeholder="请输入负责人姓名"
            required
            class="form-input"
          />
        </div>

        <!-- 密码输入框 -->
        <div class="form-row">
          <label for="reg-password" class="form-label">密码:</label>
          <input
            id="reg-password"
            v-model="registerForm.password"
            type="password"
            placeholder="请输入密码"
            required
            class="form-input"
          />
        </div>

        <!-- 确认密码输入框 -->
        <div class="form-row">
          <label for="reg-confirm-password" class="form-label">确认密码:</label>
          <input
            id="reg-confirm-password"
            v-model="registerForm.confirmPassword"
            type="password"
            placeholder="请再次输入密码"
            required
            class="form-input"
          />
        </div>

        <button type="submit" class="register-button">注册</button>
      </form>

      <div class="register-footer">
        <router-link to="/Login" class="login-link">已有账户？立即登录</router-link>
      </div>
    </div>
  </div>
</template>

<style scoped>
.register-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  min-height: 100%;
  padding-top: 0vh;
}

.register-box {
  width: 100%;
  max-width: 450px;
  padding: 2.5rem;
  background: rgba(255, 255, 255, 0.85); /* 半透明白色背景让背景的绿植能透出来 */
  border: 1px solid #A5D6A7; /* 浅草绿色细边框 */
  border-radius: 12px; /* 加大圆角 */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), inset 0 0 10px rgba(129, 199, 132, 0.2); /* 添加绿色内阴影模拟透光感 */
  margin: 1rem auto;
}

.register-title {
  text-align: center;
  margin-bottom: 2rem;
  color: #2E7D32; /* 深绿色系 */
  font-size: 1.8rem;
  font-family: "微软雅黑 Light", sans-serif; /* 圆润字体 */
  text-shadow: 0 0 5px rgba(129, 199, 132, 0.5); /* 轻微文字阴影 */
}

.register-form {
  display: flex;
  flex-direction: column;
  padding-left: 25px;
}

.form-row {
  display: flex;
  align-items: center;
  margin-bottom: 0.67rem; /* 从 2rem 减小到原来的约三分之一 */
  justify-content: flex-start;
}

.form-label {
  width: 90px;
  text-align: right;
  margin-right: 1rem;
  color: #555;
  font-weight: bold;
  font-size: 1.1rem;
  font-family: "微软雅黑 Light", sans-serif; /* 圆润字体 */
}

.form-input {
  flex: 1;
  padding: 0.9rem;
  background: rgba(255, 255, 255, 0.7); /* 更透明的白色背景 */
  border: 1px solid #A5D6A7; /* 浅草绿色边框 */
  border-radius: 8px; /* 加大圆角 */
  font-size: 1.1rem;
  box-sizing: border-box;
  height: 3rem;
  font-family: "微软雅黑 Light", sans-serif; /* 圆润字体 */
  caret-color: #4CAF50; /* 绿色光标 */
}

.form-input:focus {
  outline: none;
  border-color: #4CAF50; /* 深一点的绿色 */
  box-shadow: 0 0 3px rgba(76, 175, 80, 0.3); /* 轻微的绿色阴影 */
}

.register-button {
  background: linear-gradient(to bottom, #66BB6A, #43A047); /* 浅绿到深绿的渐变 */
  color: #FFF;
  border: none;
  border-radius: 8px; /* 加大圆角 */
  font-size: 1.2rem;
  cursor: pointer;
  margin-top: 1.5rem;
  font-weight: bold;
  width: 100%;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  font-family: "微软雅黑 Light", sans-serif; /* 圆润字体 */
}

.register-button:hover {
  background: linear-gradient(to bottom, #388E3C, #2E7D32); /* hover时渐变加深 */
}

.register-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 1.5rem;
  padding-left: 25px;
}

.login-link {
  color: #558B2F; /* 深橄榄绿 */
  text-decoration: none;
  font-size: 1rem;
  font-family: "微软雅黑 Light", sans-serif; /* 圆润字体 */
}

.login-link:hover {
  color: #2E7D32; /* hover时加深 */
  text-decoration: underline;
}

/* 添加身份选择单选框样式，与登录页面保持一致 */
.radio-group {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex: 1;
  margin-left: 0.5rem;
}

.radio-button {
  flex: 1;
}

.radio-button input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.radio-text {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem;
  border: 1px solid #ddd;
  border-radius: 8px; /* 加大圆角 */
  color: #555;
  cursor: pointer;
  transition: all 0.2s;
  box-sizing: border-box;
  min-height: 3rem;
  font-size: 1.1rem;
  font-family: "微软雅黑 Light", sans-serif; /* 圆润字体 */
  background-color: #E0F7E0; /* 浅绿灰色未选中状态 */
}

.radio-button input:checked + .radio-text {
  background-color: #31B310;
  background-color: #4CAF50; /* 清新绿色选中状态 */
  color: white;
  border-color: #4CAF50;
}

.radio-button:hover .radio-text {
  background-color: #C8E6C9; /* hover时更亮的浅绿 */
  border-color: #4CAF50;
}
</style>
